<!DOCTYPE HTML>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>Powerful JQuery Plugins</title>
    <link href="/js/jQueryUI/jquery-ui.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jQueryScrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"></link>
  	<style type="text/css">
  		.box1, .box2, .box3 {
  			height: 20px;
  		}
  		.box1 {
  			/* 
  				设置float以后，如果内容为空
  				则会被压缩成一个点
  				float会影响临之后的元素
  			*/
  			width: 100px;
  			background-color: purple;
  			float: right;
  		}
  		.box2 {
  			/* 
  				可以使用clear: both消除浮动的影响
  			*/
  			width: 100px;
  			background-color: turquoise;
  			float: left;
  		}
  		.box3 {
  			/* 
  				也可以设置宽度100%并设置溢出部分隐藏
  			*/
  			width: 100%;
  			overflow: hidden;
  			background-color: red;
  		}
  	</style>
  </head>
  
  <body>
  	<div class="box1"></div>
  	<div class="box2"></div>
  	<div class="box3"></div>
    <script src="/js/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="/js/jQueryUI/jquery-ui.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/jquery.validate.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/messages_zh.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryScrollbar/perfect-scrollbar.jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            console.info("Dom元素加载完毕！");
        });
    </script>
  </body>
</html>